<template>
	<view class="page">
		<view class="header-line">互成一家</view>
		<view class="main-content">
			<view class="header">
				<view class="header-name">专注模式</view>
				<view class="header-actions">
					<!-- <view class="btn">
						<view class="icon" :style="`--icon: url(${ base_url }/static/img/mubiao.svg)`"></view>
						<view class="text">目标</view>
					</view> -->
					<view class="btn" @click="navigateToNextPage('/pages/checkInCalendar/checkInCalendar')">
						<view class="icon" :style="`--icon: url(${ base_url }/static/img/jilu.svg)`"></view>
						<view class="text">记录</view>
					</view>
				</view>
			</view>
			<view class="timer-container">
				<view class="timer-circle">
					<view class="time-display">
						<view class="minutes">{{ formatMinutes }}</view>
						<view class="separator">:</view>
						<view class="seconds">{{ formatSeconds }}</view>
					</view>
					<view class="focus-text" :style="clock.isRunning ? '--c: #fff' : '--c: #666'">{{ clock.isRunning ? '正在专注' : '准备开始' }}</view>
				</view>
				<view class="timer-controls">
					<view class="control-button" :class="clock.isRunning ? 'isRunning' : 'noIsRunning'" @click="startClock">
						<view class="icon" :style="`--icon: url(${ base_url }${ clock.isRunning ? '/static/img/zanting.svg' : '/static/img/kaishi.svg' })`"></view>
						<view class="text">{{ clock.isRunning ? '暂停' : '开始' }}</view>
					</view>
					<view class="control-button reset" disabled="" @click="resetClock">
						<view class="icon" :style="`--icon: url(${ base_url }/static/img/chongzhi.svg)`"></view>
						<view class="text">重置</view>
					</view>
				</view>
				<view class="duration-selector">
					<view class="duration-button" :class="item.active ? 'active' : ''" v-for="item in durationList" :key="item.id" @click="selectDuration(item)">{{ item.text }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { formatNum } from '../../util/tool.js';
import { checkin } from '../../server/checkin.js';
import { base_url } from '../../server/config';

export default {
	data() {
		return {
			base_url,
			clock: {
				remainTime: 0,      // 剩余倒计时秒数
				minutes: 15,
				seconds: 0,
				isRunning: false,   // 是否正在倒计时
				intervalId: null,   // 倒计时的定时器ID
				isStart: false      // 是否开始倒计时
			},
			durationList: [
				{
					id: 1,
					text: '15分钟',
					value: 15,
					active: true
				}, {
					id: 2,
					text: '30分钟',
					value: 30,
					active: false
				}, {
					id: 3,
					text: '45分钟',
					value: 45,
					active: false
				}, {
					id: 4,
					text: '60分钟',
					value: 60,
					active: false
				}
			],
		}
	},
	methods: {
		navigateToNextPage(url) {
			uni.navigateTo({ url });
		},
		startClock() {
			console.log('startClock');
			if (this.clock.isStart) {
				if (this.clock.isRunning) {
					this.clock.isRunning = false;
				} else {
					this.clock.isRunning = true;
				}
			} else {
				// 开始倒计时的状态变量
				this.clock.isStart = true;
				this.clock.isRunning = true;
				// 设置倒计时时间
				this.resetClockTime();
				// 设置倒计时的定时器
				this.clock.intervalId = setInterval(async () => {
					console.log('interval');
					if (this.clock.isRunning) {
						this.clock.remainTime--;
						// 更新倒计时显示
						this.clock.minutes = Math.floor(this.clock.remainTime / 60);
						this.clock.seconds = this.clock.remainTime % 60;
						if (this.clock.remainTime <= 0) {
							// 倒计时结束，重置状态
							this.clock.isRunning = false;
							this.clock.isStart = false;
							// 关闭定时器
							clearInterval(this.clock.intervalId);
							// 保存到专注记录中
							let res = await focusCheckIn(this);
							console.log('打卡成功', res);
						}
					}
				}, 1000);
			}
		},
		resetClock() {
			// 开始倒计时的状态变量
			this.clock.isStart = false;
			this.clock.isRunning = false;
			// 设置倒计时的定时器
			if (this.clock.intervalId) {
				clearInterval(this.clock.intervalId);
				this.clock.intervalId = null;
			}
			// 重置倒计时显示的时间
			this.resetClockTime();
		},
		selectDuration(durationItem) {
			// 调用重置函数
			this.resetClock();
			// 正常的逻辑
			this.durationList.forEach(item => {
				let itemId = durationItem.id;
				if (itemId == item.id) {
					// 设置选中样式
					item.active = true;
					// 刷新时钟状态
					this.clock.minutes = durationItem.value;
					this.clock.seconds = 0;
					this.clock.isRunning = false;
					this.clock.isStart = false;
					if (this.clock.intervalId) {
						clearInterval(this.clock.intervalId);
						this.clock.intervalId = null;
					}
				} else {
					item.active = false;
				}
			});
		},
		resetClockTime() {
			// 重置倒计时显示的时间
			for (let i = 0; i < this.durationList.length; i++) {
				let item = this.durationList[i];
				if (item.active) {
					this.clock.minutes = item.value;
					this.clock.seconds = 0;
				}
			}
			// 设置倒计时时间
			this.clock.remainTime = this.clock.minutes * 60 + this.clock.seconds;
		}
	},
	computed: {
		formatMinutes() {
			return formatNum(this.clock.minutes);
		},
		formatSeconds() {
			return formatNum(this.clock.seconds);
		}
	},
	onHide() {
		console.log('onHide');
		// 调用重置函数
		this.resetClock();
	}
}

async function focusCheckIn(self) {
	try {
		let duration = 15;
		for (let i = 0; i < self.durationList.length; i++) {
			let item = self.durationList[i];
			if (item.active) {
				duration = item.value;
				break;
			}
		}
		let res = await checkin.focusCheckIn(duration);
		if (res.success) {
			uni.showToast({
				title: '专注模式结束，休息一下吧！',
				icon: 'none'
			});
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	} catch (err) {
		uni.showToast({
			title: '网络错误！！！',
			icon: 'none'
		});
	}
}

</script>

<style>
.main-content {
	background-color: #f5f5f5;
}

.header {
	width: 100%;
	height: 17vmin;
	box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4vmin;
    background-color: #fff;
	box-shadow: 0 -5vmin 0 5vmin #fff;
}

.header .header-name {
    font-size: 4.5vmin;
    font-weight: 600;
}

.header .header-actions {
    display: flex;
    gap: 2vmin;
}

.header .btn {
    display: flex;
    align-items: center;
    gap: 1vmin;
    padding: 1.5vmin 3vmin;
    border-radius: 4.5vmin;
    background: #fff;
    color: #07c160;
    border: none;
    font-size: 3.5vmin;
}

.header .icon {
	width: 6vmin;
	height: 6vmin;
	background-image: var(--icon);
}

.header .text {
	font-size: 3.5vmin;
}

.timer-container {
	display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6vmin;
    padding: 8vmin 5vmin;
	background-color: #f5f5f5;
}

.timer-container .timer-circle {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	background-color: rgb(7, 193, 96);
}

.timer-container .time-display {
    font-size: 12vmin;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-bottom: 2vmin;
}

.timer-container .time-display > view {
	display: inline;
}

.timer-container .focus-text {
    font-size: 4vmin;
    /* color: var(--c); */
	color: #666;
}

.timer-container .timer-controls {
    display: flex;
    gap: 4vmin;
}

.timer-container .control-button {
    display: flex;
    align-items: center;
    gap: 2vmin;
    padding: 3vmin 6vmin;
    border-radius: 6vmin;
    font-size: 4vmin;
    font-weight: 500;
}

.timer-container .control-button.isRunning {
    background: #07c160;
    color: #fff;
}

.timer-container .control-button.noIsRunning {
    background: #fff;
    color: #07c160;
}

.timer-container .control-button.reset {
    background: #f5f5f5;
    color: #666;
}

.timer-container .control-button .icon {
	width: 6vmin;
	height: 6vmin;
	background-image: var(--icon);
}

.timer-container .duration-selector {
    display: flex;
    justify-content: center;
    gap: 3vmin;
    flex-wrap: wrap;
}

.timer-container .duration-button {
	padding: 2vmin 4vmin;
    border-radius: 4vmin;
    background: #fff;
    color: #666;
    font-size: 3.5vmin;
}

.timer-container .duration-button.active {
	background: #07c160;
	color: #fff;
}
</style>
